<template>
  <div class="monthStatementBox">
    <div class="monthStatementTop">
      <div class="title">
        <span>社保报表</span>
      </div>
    </div>
    <div class="monthStatementTable">
      <div class="itemDropDown">
        <div class="topLab">
          <div><span style="background-color:#cfeffe;" />已离职</div>
          <div><span style="background-color:#a8f8bb;" />再入职</div>
          <div><span style="background-color:#fedbd7;" />公司合计</div>
          <div><span style="background-color:#ffe8c9;" />一级部门</div>
          <div><span style="background-color:#fdfcd5;" />二级部门</div>
          <div class="rightLabBox">
            <el-button
              type="primary"
              size="small"
            >导出</el-button>
          </div>
        </div>
        <el-table
          v-loading="loading"
          :data="contentData"
          border
          style="width: 100%;text-align: center"
          empty-text="暂无数据"
          fit
          highlight-current-row
        >
          <el-table-column
            type="index"
            label="序号"
            center
            width="50"
          />
          <el-table-column
            prop="username"
            label="姓名"
            width="150px"
          />
          <el-table-column
            prop="timeOfEntry"
            label="入职时间"
            :formatter="transformDateFormat"
            width="150px"
          />
          <el-table-column
            prop="mobile"
            label="手机号"
            width="150px"
          />
          <el-table-column
            prop="idNumber"
            label="身份证号码"
            width="150px"
          />
          <el-table-column
            prop="theHighestDegreeOfEducation"
            label="学历"
            width="150px"
          />
          <el-table-column
            prop="bankCardNumber"
            label="开户行"
            width="150px"
          />
          <el-table-column
            prop="firstLevelDepartment"
            label="一级部门"
            width="150px"
          />
          <el-table-column
            prop="twoLevelDepartment"
            label="二级部门"
            width="150px"
          />
          <el-table-column
            prop="workingCity"
            label="工作城市"
            width="150px"
          />
          <el-table-column
            prop="socialSecurityComputerNumber"
            label="社保电脑号"
            width="150px"
          />
          <el-table-column
            prop="providentFundAccount"
            label="公积金账号"
            width="150px"
          />
          <el-table-column
            prop="leaveDate"
            label="离职时间"
            width="150px"
          />
          <el-table-column
            prop="householdRegistrationType"
            label="户籍类型"
            width="150px"
          />
          <el-table-column
            prop="participatingInTheCity"
            label="参保城市"
            width="150px"
          />
          <el-table-column
            prop="socialSecurityMonth"
            label="社保月份"
            width="150px"
          />
          <el-table-column
            prop="socialSecurityBase"
            label="社保基数"
            width="150px"
          />
          <el-table-column
            prop="socialSecurity"
            label="社保合计"
            width="150px"
          />
          <el-table-column
            prop="socialSecurityEnterprise"
            label="社保企业"
            width="150px"
          />
          <el-table-column
            prop="socialSecurityIndividual"
            label="社保个人"
            width="150px"
          />
          <el-table-column
            prop="providentFundCity"
            label="公积金城市"
            width="150px"
          />
          <el-table-column
            prop="providentFundMonth"
            label="公积金月份"
            width="150px"
          />
          <el-table-column
            prop="providentFundBase"
            label="公积金基数"
            width="150px"
          />
          <el-table-column
            prop="accumulationFundEnterpriseBase"
            label="公积金企业基数"
            width="150px"
          />
          <el-table-column
            prop="proportionOfProvidentFundEnterprises"
            label="公积金企业比例"
            width="150px"
          />
          <el-table-column
            prop="individualBaseOfProvidentFund"
            label="公积金个人基数"
            width="150px"
          />
          <el-table-column
            prop="personalRatioOfProvidentFund"
            label="公积金个人比例"
            width="150px"
          />
          <el-table-column
            prop="totalProvidentFund"
            label="公积金合计"
            width="150px"
          />
          <el-table-column
            prop="providentFundEnterprises"
            label="公积金企业"
            width="150px"
          />
          <el-table-column
            prop="providentFundIndividual"
            label="公积金个人"
            width="150px"
          />
          <el-table-column
            prop="pensionEnterpriseBase"
            label="养老企业基数"
            width="150px"
          />
          <el-table-column
            prop="proportionOfPensionEnterprises"
            label="养老企业比例"
            width="150px"
          />
          <el-table-column
            prop="pensionEnterprise"
            label="养老企业"
            width="150px"
          />
          <el-table-column
            prop="personalPensionBase"
            label="养老个人基数"
            width="150px"
          />
          <el-table-column
            prop="personalPensionRatio"
            label="养老个人比例"
            width="150px"
          />
          <el-table-column
            prop="oldAgeIndividual"
            label="养老个人"
            width="150px"
          />
          <el-table-column
            prop="unemploymentEnterpriseBase"
            label="失业企业基数"
            width="150px"
          />
          <el-table-column
            prop="proportionOfUnemployedEnterprises"
            label="失业企业比例"
            width="150px"
          />
          <el-table-column
            prop="unemployedEnterprise"
            label="失业企业"
            width="150px"
          />
          <el-table-column
            prop="theNumberOfUnemployedIndividuals"
            label="失业个人基数"
            width="150px"
          />
          <el-table-column
            prop="percentageOfUnemployedIndividuals"
            label="失业个人比例"
            width="150px"
          />
          <el-table-column
            prop="unemployedIndividual"
            label="失业个人"
            width="150px"
          />
          <el-table-column
            prop="medicalEnterpriseBase"
            label="医疗企业基数"
            width="150px"
          />
          <el-table-column
            prop="proportionOfMedicalEnterprises"
            label="医疗企业比例"
            width="150px"
          />
          <el-table-column
            prop="medicalEnterprise"
            label="医疗企业"
            width="150px"
          />
          <el-table-column
            prop="medicalPersonalBase"
            label="医疗个人基数"
            width="150px"
          />
          <el-table-column
            prop="medicalPersonalRatio"
            label="医疗个人比例"
            width="150px"
          />
          <el-table-column
            prop="medicalIndividual"
            label="医疗个人"
            width="150px"
          />
          <el-table-column
            prop="baseOfIndustrialInjuryEnterprises"
            label="工伤企业基数"
            width="150px"
          />
          <el-table-column
            prop="proportionOfIndustrialInjuryEnterprises"
            label="工伤企业比例"
            width="150px"
          />
          <el-table-column
            prop="industrialInjuryEnterprise"
            label="工伤企业"
            width="150px"
          />
          <el-table-column
            prop="fertilityEnterpriseBase"
            label="生育企业基数"
            width="150px"
          />
          <el-table-column
            prop="proportionOfFertilityEnterprises"
            label="生育企业比例"
            width="150px"
          />
          <el-table-column
            prop="childbearingEnterprise"
            label="生育企业"
            width="150px"
          />
          <el-table-column
            prop="baseOfSeriousIllness"
            label="大病企业基数"
            width="150px"
          />
          <el-table-column
            prop="proportionOfSeriouslyIllEnterprises"
            label="大病企业比例"
            width="150px"
          />
          <el-table-column
            prop="bigDiseaseEnterprise"
            label="大病企业"
            width="150px"
          />
          <el-table-column
            prop="personalBaseOfSeriousIllness"
            label="大病个人基数"
            width="150px"
          />
          <el-table-column
            prop="personalProportionOfSeriousIllness"
            label="大病个人比例"
            width="150px"
          />
          <el-table-column
            prop="aPersonOfGreatDisease"
            label="大病个人"
            width="150px"
          />
          <el-table-column
            prop="providentFundNotes"
            label="公积金备注"
            width="150px"
          />
          <el-table-column
            prop="socialSecurityNotes"
            label="社保备注"
            width="150px"
          />
        </el-table>
      </div>
    </div>
    <el-row
      type="flex"
      justify="center"
      align="middle"
      style="height:60px"
    >
      <el-col :span="12">
        <el-button
          size="small"
          type="primary"
          @click="archivingReportForm"
        >归档{{ yearVal ? yearVal.substr(4) : '' }}报表</el-button>
        <el-button
          size="small"
          type="primary"
          @click="createReportForm"
        >新建报表</el-button>
        <el-button
          size="small"
          @click="$router.back()"
        >取消</el-button>
      </el-col>
    </el-row>
  </div>

</template>

<script>
import { getArchivingCont, getArchivingArchive, newReport } from '@/api/social'
export default {
  name: 'HistoricalArchiving',
  data () {
    return {
      num: 0,
      yearVal: this.$route.query.yearMonth,
      contentData: [],
      loading: false
    }
  },
  created () {
    this.getArchivingCont()
  },
  methods: {
    async getArchivingCont () {
      this.loading = true
      this.contentData = await getArchivingCont({ month: this.yearVal, opType: 1 })
      this.loading = false
    },
    // 归档报表
    archivingReportForm () {
      this.$confirm(`您确定要归档${this.yearVal}报表？报表归档将覆盖上一次归档记录，无法恢复。`).then(async () => {
        await getArchivingArchive({ yearMonth: this.yearVal })
        this.$message({
          type: 'success',
          message: '确定!'
        })
      })
    },
    // 新建报表
    createReportForm () {
      const yearMonth = this.getNextMonth()
      const year = yearMonth.substring(0, 4)
      const month = yearMonth.substring(4)
      this.$confirm(
        '您将创建 《 ' + year + '年' + month + '月 》 报表'
      ).then(() => {
        this.yearMonth = yearMonth
        this.createNewReport(yearMonth)
        this.getArchivingCont()
      })
    },
    async createNewReport (yearMonth) {
      await newReport({ yearMonth })
      this.$message.success('操作成功')
    },
    getNextMonth () {
      const year = this.yearVal.substring(0, 4)
      const month = this.yearVal.slice(4)
      let year2 = year
      let month2 = parseInt(month) + 1
      if (month2 === 13) {
        year2 = parseInt(year2) + 1
        month2 = 1
      }
      if (month2 < 10) {
        month2 = '0' + month2
      }
      const t2 = year2 + month2
      return t2
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "./../../styles/variables.scss";

.monthStatementBox {
  padding: 20px;
  .monthStatementTop {
    position: relative;
    background: #fff;
    padding: 10px 15px 0 15px;
    border-bottom: solid 1px #f4f4f4;
    .title {
      color: $blue;
      line-height: 40px;
      border-bottom: solid 2px $blue;
      font-size: 18px;
      font-weight: bold;
      display: inline-block;
      padding: 0 25px;
      .yearChange {
        position: absolute;
        top: 5px;
        right: 10px;
      }
    }
  }
  .monthStatementTable {
    background: #fff;
    .itemTopLab {
      border-top: solid 1px #f0f0f0;
      border-bottom: solid 3px #ccc;
      padding: 15px;
      div {
        display: inline-block;
        padding: 0 50px;
        border-right: solid 1px #ccc;
      }
      div:last-child,
      div:first-child {
        border: none;
      }
      .lab {
        position: relative;
        top: -15px;
        padding-right: 0;
        padding-left: 15px;
      }
      .labTit {
        cursor: pointer;
      }
      .title {
        font-size: 16px;
        margin: 10px 0;
        span {
          position: relative;
          bottom: -2px;
          font-size: 13px;
          color: #999;
          margin-left: 5px;
        }
      }
      .itemTit {
        color: #999;
        margin: 8px 0;
        font-size: 13px;
      }
      .itemNum {
        font-size: 20px;
        margin: 0;
      }
    }
    .itemDropDown {
      background: #fff;
      .topLab {
        position: relative;
        padding: 15px;
        div {
          display: inline-block;
          margin: 0 10px;
          span {
            display: inline-block;
            position: relative;
            top: 2px;
            margin-right: 5px;
            width: 15px;
            height: 15px;
            // background:$cl-1;
          }
        }
        .rightLabBox {
          position: absolute;
          right: -10px;
          top: 10px;
          div {
            border: solid 1px $green;
            color: $green;
            border-radius: 3px;
            padding: 4px 10px;
            font-size: 14px;
          }
        }
      }
      .act {
        border-bottom: solid 3px $panGreen;
        .lab {
          color: $panGreen;
        }
        .labTit {
          color: $panGreen;
        }
      }
    }
    .itemes:hover {
      background: #fafbff;
    }
    .itemes .lab:hover {
      cursor: pointer;
    }
  }
  .butList {
    border-top: solid 1px #f4f4f4;
    text-align: center;
    background: #fff;
    span {
      display: inline-block;
      background: $green;
      color: #fff;
      padding: 8px 20px;
      border-radius: 3px;
      margin: 10px;
      cursor: pointer;
    }
    .cancel {
      background: #ccc;
      color: #666;
    }
  }
}
</style>
